<template name="appManage">
	{{#with app}}
		<section class="page-container page-home page-static page-settings rc-apps-section">
			{{# header sectionName='App_Details' fixedHeight=true hideHelp=true fullpage=true}}
				{{#if installed}}
					<div class="rc-header__section-button">
						{{#unless isSettingsPristine}}
							<button class="rc-button rc-button--cancel js-cancel-editing-settings">{{_ "Cancel" }}</button>
						{{/unless}}
						<button class="rc-button rc-button--primary js-save-settings {{#if isSaving}}loading{{/if}}" disabled='{{isSettingsPristine}}'>{{_ "Save_changes" }}</button>
					</div>
				{{/if}}

				<div class="rc-header__block rc-header__block-action">
					<button class="rc-button rc-button--nude js-close" aria-label="{{_ "Close"}}">
						{{> icon icon="cross"}}
					</button>
				</div>
			{{/header}}

			<div class="content">
				{{#requiresPermission 'manage-apps'}}
					{{#if error}}
						<div class="apps-error error-color">
							<i class="icon-attention"></i>
							<p>{{error}}</p>
						</div>
					{{else if isLoading}}
						{{> loading}}
					{{else}}
						<div class="rc-apps-details">
							<div class="rc-apps-container rc-apps-container__header">
								{{#if iconFileData}}
									<div class="rc-apps-details__photo" style="background-image:url(data:image/png;base64,{{iconFileData}})"></div>
								{{else}}
									<div class="rc-apps-details__photo" style="background-image:url({{iconFileContent}})"></div>
								{{/if}}
								<div class="rc-apps-details__content">
									<h2 class="rc-apps-details__name">{{name}}</h2>
									<div class="rc-apps-details__row">
										{{#if author.name}}
											<span class="rc-apps-details__author">by {{author.name}}</span>
										{{/if}}
										<span class="rc-apps-details__side-info">Version {{version}}</span>
									</div>

									<div class="rc-apps-details__row rc-apps-details__row--centered">
										{{#let buttonProps=(appButtonProps .) statusSpanProps=(appStatusSpanProps .)}}
											{{#if buttonProps}}
												<button
													class="rc-button rc-button--primary {{#if working}}rc-apps-section__button--working{{/if}} js-{{buttonProps.action}}"
													disabled={{working}}
													data-id={{id}}
												>
													{{#if working}}
														{{> icon icon="loading" block="rc-icon--default-size rc-apps-section__spinning-icon"}}
													{{else if ($eq buttonProps.action 'update')}}
														{{> icon icon="reload" block="rc-icon--default-size"}}
													{{else}}
														{{> icon icon="circled-arrow-down" block="rc-icon--default-size"}}
													{{/if}}
													{{_ buttonProps.label}}
												</button>
											{{/if}}

											{{#if statusSpanProps}}
												<span class="rc-apps-section__status {{#if statusSpanProps.type}}rc-apps-section__status--{{statusSpanProps.type}}{{/if}}">
													{{> icon icon=statusSpanProps.icon block="rc-icon--default-size"}}
													{{_ statusSpanProps.label}}
												</span>
											{{/if}}
										{{/let}}

										<span class="rc-apps-details__side-info-wrapper">
											{{#unless installed}}
												{{#if priceDisplay}}
													<span class="rc-apps-details__side-info rc-apps-details__side-info--twice">
														{{priceDisplay}}
													</span>
												{{/if}}
											{{/unless}}
										</span>

										{{#if installed}}
											<button class="rc-apps-section__app-menu-trigger js-menu" data-app="{{appId}}">
												{{> icon icon="menu" block="rc-icon--default-size"}}
											</button>
										{{/if}}
									</div>
								</div>
							</div>
						</div>
						<div class="rc-apps-container">
							<div class="rc-apps-details__content">
								{{#each warnings}}
									<div class="rc-apps-details__alert rc-apps-details__alert-warning">
										{{.}}
									</div>
								{{/each}}

								{{#each errors}}
									<div class="rc-apps-details__alert rc-apps-details__alert-error">
										{{.}}
									</div>
								{{/each}}

								{{#if categories}}
									<div class="rc-apps-details__row rc-apps-details__block">
										<h2> {{_ "Categories"}} </h2>
										<div class="rc-apps-details__row">
											{{#each category in categories}}
												<span class="rc-apps-category">{{ category }}</span>
											{{/each}}
										</div>
									</div>
								{{/if}}
								<div class="rc-apps-details__row rc-apps-details__block">
									<h2> {{_ "Contact"}} </h2>
									<div class="rc-apps-details__row">
										<div class="rc-apps-details__col">
										{{#if author.homepage}}
												<h3>{{_ "Author_Site"}}</h3>
												<a href="{{author.homepage}}" target="_blank">{{author.homepage}}</a>
										{{/if}}
										</div>
										<div class="rc-apps-details__col">
											{{#if author.support}}
												<h3>{{_ "Support"}}</h3>
												{{#if isEmail author.support}}
													<a href="mailto:{{author.support}}">{{author.support}}</a>
												{{else}}
													<a href="{{author.support}}" target="_blank">{{author.support}}</a>
												{{/if}}
											{{/if}}
										</div>
									</div>
								</div>
								<div class="rc-apps-details__row">
									<h2> {{_ "Details"}} </h2>
								</div>
								{{#if summary}}
									<div>
										{{ summary }}
									</div>
								{{/if}}

								{{#if description}}
									<div class="rc-apps-details__description">
										<p>{{ description }}</p>
									</div>
								{{/if}}

								{{#if bundledIn}}
									<div class="rc-apps-details__row">
										<h2> {{_ "Bundles"}} </h2>
									</div>
									<div class="rc-apps-details__bundles">
										{{#each bundledIn}}
											<div class="rc-apps-details__bundle">
												<div class="rc-apps-details__bundle_icons">
													{{#each apps}}
														{{#if latest.iconFileData}}
															<div class="rc-apps-details__bundle_icon" style="background-image:url(data:image/png;base64,{{latest.iconFileData}})"></div>
														{{else}}
															<div class="rc-apps-details__bundle_icon" style="background-image:url({{latest.iconFileContent}})"></div>
														{{/if}}
													{{/each}}
												</div>
												<div class="rc-apps-details__bundle_body">
													<div class="rc-apps-details__bundle_body_title">{{ bundleName }}</div>
													{{#if apps}}
														{{bundleAppNames apps}}
													{{/if}}
												</div>
											</div>
										{{/each}}
									</div>
								{{/if}}

								{{#if apis}}
									<div class="rc-apps-details__row">
										<h2> {{_ "Apis"}} </h2>
									</div>
									<div class="rc-apps-settings">
										{{#each apis}}
											<div class="rc-apps-settings__item">
												<div class="rc-input">
													<div class="rc-apps-details__api">
														{{renderMethods methods}} {{path}}
													</div>
													<div class="rc-input__description rc-apps-details__api__description">
														{{#each methods}}
															<div class="rc-apps-details__api__description__item">{{#each curl . ..}}{{.}}<br />{{/each}}</div>
														{{/each}}
													</div>
												</div>
											</div>
										{{/each}}
									</div>
								{{/if}}

								{{#if settings}}
									<div class="rc-apps-details__row">
										<h2> {{_ "Settings"}} </h2>
									</div>
									<div class="rc-apps-settings">
										{{#each settings}}
											<div class="rc-apps-settings__item">
												{{#if $eq type 'string'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-input__wrapper">
																{{#if multiline}}
																	<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
																{{else}}
																	<input class="rc-input__element" type="text" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
																{{/if}}
															</div>
														</label>
														{{#if i18nDescription}}
															<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{#if i18nAlert}}
															<div class="rc-input__error">
																<div class="rc-input__error-icon">
																	{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
																</div>
																<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
															</div>
														{{/if}}
													</div>
												{{else if $eq type 'boolean'}}
													<div class="rc-switch rc-switch--blue">
													<label class="rc-switch__label" tabindex="-1" for="{{id}}">
														<input type="checkbox" class="rc-switch__input" name="{{id}}" id="{{id}}" checked="{{$eq value true}}">
														<span class="rc-switch__button">
															<span class="rc-switch__button-inside"></span>
														</span>
														<span class="rc-switch__text">
															{{_ i18nLabel}}
														</span>
													</label>
													<span class="rc-switch__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</span>
													{{# if i18nAlert}}
														<div class="rc-input__error">
															<div class="rc-input__error-icon">
																{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
															</div>
															<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
														</div>
													{{/if}}
												</div>
												{{else if $eq type 'int'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-input__wrapper">
																{{#if multiline}}
																<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
																{{else}}
																<input class="rc-input__element" type="number" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
																{{/if}}
															</div>
														</label>
														{{# if i18nDescription}}
															<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
															<div class="rc-input__error">
																<div class="rc-input__error-icon">
																	{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
																</div>
																<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
															</div>
														{{/if}}
													</div>
												{{else if $eq type 'password'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-input__wrapper">
																{{#if multiline}}
																<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
																{{else}}
																<input class="rc-input__element" type="password" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
																{{/if}}
															</div>
														</label>
														{{# if i18nDescription}}
															<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
															<div class="rc-input__error">
																<div class="rc-input__error-icon">
																	{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
																</div>
																<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
															</div>
														{{/if}}
													</div>
												{{else if $eq type 'relativeUrl'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-input__wrapper">
																{{#if $eq type 'relativeUrl'}}
																	<input class="rc-input__element" type="text" name="{{id}}" value="{{relativeUrl value}}" placeholder="{{_ i18nPlaceholder}}" {{isReadonly}}/>
																{{/if}}
															</div>
														</label>
														{{# if i18nDescription}}
															<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
															<div class="rc-input__error">
																<div class="rc-input__error-icon">
																	{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
																</div>
																<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
															</div>
														{{/if}}
													</div>
												{{else if $eq type 'font'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-input__wrapper">
																{{#if multiline}}
																<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
																{{else}}
																<input class="rc-input__element" type="text" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
																{{/if}}
															</div>
														</label>
														{{# if i18nDescription}}
															<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
															<div class="rc-input__error">
																<div class="rc-input__error-icon">
																	{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
																</div>
																<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
															</div>
														{{/if}}
													</div>
												{{else if $eq type 'code'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-input__wrapper">
																{{#if isDisabled.disabled}}
																	{{> CodeMirror name=id options=(getEditorOptions true) code=(i18nDefaultValue) }}
																{{else}}
																<div class="code-mirror-box" data-editor-id="{{id}}">
																	<div class="title">
																		{{label}}
																	</div>
																	{{> CodeMirror name=id options=getEditorOptions code=value }}
																	<div class="buttons">
																		<button class="button primary button-fullscreen">{{_ "Full_Screen"}}</button>
																		<button class="button primary button-restore">{{_ "Exit_Full_Screen"}}</button>
																	</div>
																</div>
																{{/if}}
															</div>
														</label>
														{{# if i18nDescription}}
														<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
														<div class="rc-input__error">
															<div class="rc-input__error-icon">
																{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
															</div>
															<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
														</div>
														{{/if}}
													</div>

												{{else if $eq type 'select'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-select">
																<select class="rc-select__element" name="{{id}}">
																	{{#each values}}
																	<option class="rc-select__option" value="{{key}}" selected="{{selectedOption ../id key}}">{{_ i18nLabel}}</option>
																	{{/each}}
																</select>
																{{> icon block="rc-select__arrow" icon="arrow-down" }}
															</div>
														</label>
														{{# if i18nDescription}}
														<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
														<div class="rc-input__error">
															<div class="rc-input__error-icon">
																{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
															</div>
															<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
														</div>
														{{/if}}
													</div>

												{{else if $eq type 'color'}}
													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-input__wrapper">
																{{#if multiline}}
																<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
																{{else}}
																<input class="rc-input__element" type="color" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
																{{/if}}
															</div>
														</label>
														{{# if i18nDescription}}
														<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
														<div class="rc-input__error">
															<div class="rc-input__error-icon">
																{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
															</div>
															<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
														</div>
														{{/if}}
													</div>
												{{ else if $eq type 'language'}}

													<div class="rc-input">
														<label class="rc-input__label">
															<div class="rc-input__title">{{_ i18nLabel}}</div>
															<div class="rc-select">
																<select class="rc-select__element" name="{{id}}">
																	{{#each language in languages}}
																		<option class="rc-select__option" value="{{language.key}}" selected="{{selectedOption language.key}}">{{_ language.name}}</option>
																	{{/each}}
																</select>
																{{> icon block="rc-select__arrow" icon="arrow-down" }}
															</div>
														</label>
														{{# if i18nDescription}}
														<div class="rc-input__description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
														{{/if}}
														{{# if i18nAlert}}
														<div class="rc-input__error">
															<div class="rc-input__error-icon">
																{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
															</div>
															<div class="rc-input__error-message">{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
														</div>
														{{/if}}
													</div>
												{{else}}
												<div class="input-line double-col">
													<label class="setting-label">{{_ i18nLabel}}</label>
													<div class="setting-field">
														{{#if $eq type 'action'}}
															{{#if hasChanges section}}
															<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
															{{else}}
															<button type="button" class="button primary action" data-setting="{{id}}" data-action="{{value}}">{{_ actionText}}</button>
															{{/if}}
														{{/if}}

														{{#if $eq type 'asset'}}
															{{#if value.url}}
															<div class="settings-file-preview">
																<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
																<div class="action">
																	<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
																</div>
															</div>
															{{else}}
															<div class="settings-file-preview">
																<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
																<div class="action">
																	<div class="button primary">{{_ 'Select_file'}}
																		<input type="file" accept="{{assetAccept fileConstraints}}" />
																	</div>
																</div>
															</div>
															{{/if}}
														{{/if}}

														{{#if $eq type 'roomPick'}}
															<div>
																{{> inputAutocomplete settings=autocompleteRoom id=id name=id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
																<ul class="selected-rooms">
																	{{#each selectedRooms}}
																	<li class="remove-room" data-setting={{../id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
																	{{/each}}
																</ul>
															</div>
														{{/if}}

														{{#if i18nDescription}}
															<div class="settings-description">{{{RocketChatMarkdown (_ i18nDescription)}}}</div>
															{{/if}}
															{{#if i18nAlert}}
															<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{RocketChatMarkdown (_ i18nAlert)}}}</div>
														{{/if}}
													</div>
												</div>
												{{/if}}

											</div>
										{{/each}}
									</div>
								{{/if}}
							</div>
						</div>
					{{/if}}
				{{/requiresPermission}}
			</div>
		</section>
	{{/with}}
</template>
